<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.batchNo" placeholder="请输入批次号" style="width: 200px;" class="filter-item" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="info" icon="el-icon-refresh" @click="handleReset">
        重置
      </el-button>
      
      <el-input-number v-model="listQuery.num" @change="handleChange" :min="1" :max="9" label="描述文字" style="float:right;" class="filter-item"></el-input-number>
      <span style="float:right;height:36px;line-height:36px;" class="filter-item">限制天数:</span>
    </div>
    <el-row>
      <el-col style="width: 20%;">
        <div class="echart" :style="chartStyle" />
      </el-col>
      <el-col style="width: 20%;">
        <div class="echart" :style="chartStyle" />
      </el-col>
      <el-col style="width: 20%;">
        <div class="echart" :style="chartStyle" />
      </el-col>
      <el-col style="width: 20%;">
        <div class="echart" :style="chartStyle" />
      </el-col>
      <el-col style="width: 20%;">
        <div class="echart" :style="chartStyle" />
      </el-col>
    </el-row>
    <!-- <el-table
      style="margin-top: 20px;"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column :width="150" align="center" label="批次号" prop="batchNo" />
      <el-table-column align="center" label="计划数量" prop="planCount" />
      <el-table-column align="center" label="锁定数量" prop="lockCount" >
        <template slot-scope="scope">
          <div>{{scope.row | lockCountFilter}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="锁定率">
        <template slot-scope="scope">
          <div>{{scope.row | lockCountRateFilter}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="焊装20交付" prop="welding" >
        <template slot-scope="scope">
          <div>{{scope.row | weldingFilter}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="焊装20交付率" >
        <template slot-scope="scope">
          <div>{{scope.row | weldingRateFilter}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="涂装20交付" prop="painting" >
        <template slot-scope="scope">
          <div>{{scope.row | paintingFilter}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="涂装20交付率">
        <template slot-scope="scope">
          <div>{{scope.row | paintingRateFilter}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="总装20交付" prop="assemblyTwenty" >
        <template slot-scope="scope">
          <div>{{scope.row | assemblyTwentyFilter}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="总装20交付率">
        <template slot-scope="scope">
          <div>{{scope.row | assemblyTwentyRateFilter}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="整车交付" prop="assembly" />
      <el-table-column align="center" label="整车交付率">
        <template slot-scope="scope">
          <div>{{scope.row.assembly | rateFilter(scope.row.planCount)}}</div>
        </template>
      </el-table-column>
    </el-table> -->
    <el-table
      style="margin-top: 20px;"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column :width="150" align="center" label="批次号" prop="batchNo" />
      <el-table-column align="center" label="计划数量" prop="planCount" />
      <el-table-column align="center" label="锁定数量" prop="lockCount" />
      <el-table-column align="center" label="锁定率">
        <template slot-scope="scope">
          <div>{{scope.row.lockCount | rateFilter(scope.row.planCount)}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="焊装20交付" prop="welding" />
      <el-table-column align="center" label="焊装20交付率" >
        <template slot-scope="scope">
          <div>{{scope.row.welding | rateFilter(scope.row.planCount)}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="涂装20交付" prop="painting" />
      <el-table-column align="center" label="涂装20交付率">
        <template slot-scope="scope">
          <div>{{scope.row.painting | rateFilter(scope.row.planCount)}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="总装20交付" prop="assemblyTwenty" />
      <el-table-column align="center" label="总装20交付率">
        <template slot-scope="scope">
          <div>{{scope.row.assemblyTwenty | rateFilter(scope.row.planCount)}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="整车交付" prop="assembly" />
      <el-table-column align="center" label="整车交付率">
        <template slot-scope="scope">
          <div>{{scope.row.assembly | rateFilter(scope.row.planCount)}}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { fetchList } from '@/api/plan/plan-excute-rate'
import waves from '@/directive/waves' // waves directive
import echarts from 'echarts'
import underscore from 'underscore'
import { isMin } from '@/utils/dataTest'
export default {
  name: 'PlanExcuteRate',
  directives: { waves },
  filters: {
    rateFilter(count, total) {
      return Math.round(count / total * 100) + '%'
    },
    lockCountFilter(row) {
      if(row.lockCount === 0 && isMin([row.welding, row.painting, row.assemblyTwenty, row.assembly], row.lockCount)) {
        return row.planCount
      } else {
        return row.lockCount
      }
    },
    lockCountRateFilter(row) {
      if(row.lockCount === 0 && isMin([row.welding, row.painting, row.assemblyTwenty, row.assembly], row.lockCount)) {
        return '100%'
      } else {
        return Math.round(row.lockCount / row.planCount * 100) + '%'
      }
    },
    weldingFilter(row) {
      if(row.welding === 0 && isMin([row.painting, row.assemblyTwenty, row.assembly], row.welding)) {
        return row.planCount
      } else {
        return row.welding
      }
    },
    weldingRateFilter(row) {
      if(row.welding === 0 && isMin([row.painting, row.assemblyTwenty, row.assembly], row.welding)) {
        return '100%'
      } else {
        return Math.round(row.welding / row.planCount * 100) + '%'
      }
    },
    paintingFilter(row) {
      if(row.painting === 0 && isMin([row.assemblyTwenty, row.assembly], row.painting)) {
        return row.planCount
      } else {
        return row.painting
      }
    },
    paintingRateFilter(row) {
      if(row.painting === 0 && isMin([row.assemblyTwenty, row.assembly], row.painting)) {
        return '100%'
      } else {
        return Math.round(row.painting / row.planCount * 100) + '%'
      }
    },
    assemblyTwentyFilter(row) {
      if(row.assemblyTwenty === 0 && isMin([row.assembly], row.assemblyTwenty)) {
        return row.planCount
      } else {
        return row.assemblyTwenty
      }
    },
    assemblyTwentyRateFilter(row) {
      if(row.assemblyTwenty === 0 && isMin([row.assembly], row.assemblyTwenty)) {
        return '100%'
      } else {
        return Math.round(row.assemblyTwenty / row.planCount * 100) + '%'
      }
    }
  },
  data() {
    return {
      // 查询模块
      listQuery: {
        batchNo: undefined,
        num: 3
      },
      // echarts
      chart: null,
      chartStyle: { width: "100%", height: "400px" },
      chartList: [],
      // 颜色配置
      colorList: ["#626C91", "#01E17E", "#3DD1F9", "#FFAD05", "#1890ff"],
      // 表格
      list: null,
      total: 0,
      listLoading: false,
      // 计时器
      set: null
    }
  },
  created() {
  },
  mounted() {
    // 加载前设置清除，防止叠加
    clearInterval(this.set)
    this.getList()
    this.set = setInterval(() => this.getList(), 30 * 1000)
  },
  destroyed() {
    clearInterval(this.set)
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(res => {
        if (res.code == 200) {
          this.list = res.data
          // 生成图表
          this.chartList = this.formatChartData(this.list)
          this.setOptions()
        } else {
          this.$message.error('服务器内部错误！');
        }
        this.listLoading = false
      })
    },
    // 查询
    handleFilter() {
      this.getList()
    },
    // 重置
    handleReset() {
      this.listQuery = {
        batchNo: undefined,
        num: 3
      }
    },
    handleChange() {
      this.getList()
    },
    formatChartData(list) {
      const newList = []
      newList.push({
        title: '计划锁定',
        xAxis: list.filter(a => a.lockIsShow ).map(a => a.batchNo),
        yAxis: list.filter(a => a.lockIsShow).map(a => Math.round(a.lockCount / a.planCount * 100))
      })
      newList.push({
        title: '焊装交付',
        xAxis: list.filter(a => a.weldingIsShow).map(a => a.batchNo),
        yAxis: list.filter(a => a.weldingIsShow).map(a => Math.round(a.welding / a.planCount * 100))
      })
      newList.push({
        title: '涂装交付',
        xAxis: list.filter(a => a.paintingIsShow).map(a => a.batchNo),
        yAxis: list.filter(a => a.paintingIsShow).map(a => Math.round(a.painting / a.planCount * 100))
      })
      newList.push({
        title: '总装交付',
        xAxis: list.filter(a => a.assemblyTwentyIsShow).map(a => a.batchNo),
        yAxis: list.filter(a => a.assemblyTwentyIsShow).map(a => Math.round(a.assemblyTwenty / a.planCount * 100))
      })
      newList.push({
        title: '整车交付',
        xAxis: list.filter(a => a.assemblyIsShow).map(a => a.batchNo),
        yAxis: list.filter(a => a.assemblyIsShow).map(a => Math.round(a.assembly / a.planCount * 100))
      })
      return newList
    },
    setOptions() {
      // 切换路由判断，终止函数执行报错
      if (document.getElementsByClassName("echart").length === 0) {
        return
      }
      for(let i = 0; i < this.chartList.length; i++) {
        const element = this.chartList[i]
        const chart = echarts.init(document.getElementsByClassName("echart")[i])
        chart.setOption({
          title: {
            text: element.title
          },
          grid: {
            left: 50,
            bottom: 150
          },
          // 配置x轴点位显示居中还是居左
          xAxis: {
            // 作息未确定，默认为0-23
            data: element.xAxis,
            axisTick: {
              show: true
            },
            type: 'category',
            // 刻度显示旋转偏移
            axisLabel: {
              rotate: 60
            }
          },
          // 控制点hover显示
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: '{b0}: {c0}%<br />'
          },
          yAxis: {
            axisTick: {
              show: false
            },
            type: 'value',
            max: 100,
            axisLabel: {
              formatter: '{value}%'
            }
          },
          series: [{
            name: '完成度',
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: element.yAxis,
            itemStyle: {
              color: this.colorList[i]
            }
          }]
        })
      }
    }
  }
}
</script>